<template>
  <el-table ref="tableRef" v-loading="loading" show-overflow-tooltip>
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      v-bind="column"
    >
      <template #default="scope">
        <slot v-if="$slots[column.prop]" :name="column.prop" :row="scope.row" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { type PropType, ref } from "vue";
interface TabItem {
  type: string;
  prop: string;
  slotName: string;
}
defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  columns: {
    type: Array as PropType<TabItem[]>,
    default: () => []
  }
});

const tableRef = ref(null);

// 子组件暴漏给父组件ref-dom可调用
defineExpose({
  tableRef
});
</script>

<style lang="scss" scoped></style>
